<template>
  <div class="header" @click="show = true">
    <div class="content-wrapper">
      <div class="avatar">
        <img
          src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"
          width="64"
          height="64"
        />
      </div>
      <div class="content">
        <div class="title">
          <span class="brand"></span>
          <span class="name">粥品香坊（回龙观）</span>
        </div>
        <div class="description">蜂鸟专送/38分钟送达</div>
        <div class="support">
          <span class="support-ico decrease"></span>
          <span class="text">在线支付满28减5</span>
        </div>
      </div>
      <div class="support-count">
        <span style="font-size:10px;">5个></span>
      </div>
    </div>
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span>
      <span
        class="bulletin-text"
      >粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐，发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。</span>
      <span>></span>
    </div>
    <div class="background">
      <img
        src="http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg"
        width="100%"
        height="100%"
      />
    </div>
    <div class="header-detail" v-show="show">
      <h1 class="name">粥品香坊（回龙观）</h1>
      <Star :score="score" :size="48"></Star>
      <div @click="show = false">X</div>
    </div>
  </div>
</template>

<script>
import Star from "../Star/Star.vue";
export default {
  name: "Header",
  data() {
    return {
      show: false,
      score: 4.5
    };
  },
  components: {
    Star
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: rgba(7, 17, 27, 0.5);
}
.avatar {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 64px;
  flex: 0 0 64px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 64px;
  width: 64px;
  margin-right: 16px;
}
.content-wrapper {
  margin: 15px;
}
.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}
.content .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px;
}
.title .name {
  margin-left: 6px;
  font-size: 16px;
  font-weight: bold;
}
.title .brand {
  width: 30px;
  height: 18px;
  background: url("./img/index.png");
  background-size: 30px 18px;
  background-repeat: no-repeat;
}
.content .description {
  margin-bottom: 8px;
  line-height: 12px;
  font-size: 12px;
}
.content .support {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.support .support-ico {
  margin-right: 4px;
  background: url("./img/index1.png");
  width: 12px;
  height: 12px;
  background-size: 12px 12px;
  display: inline-block;
  background-repeat: no-repeat;
}
.support-count {
  position: absolute;
  right: 12px;
  bottom: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 14px;
  background: rgba(7, 17, 27, 0.2);
}
.header .content-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 24px 12px 18px 24px;
}
.bulletin-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 28px;
  line-height: 28px;
  padding: 0 8px;
  background: rgba(7, 17, 27, 0.2);
}
.bulletin-wrapper .bulletin-title {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 22px;
  flex: 0 0 22px;
  width: 22px;
  height: 12px;
  margin-right: 4px;
  background: url("./img/index2.png");
  background-size: 22px 12px;
  background-repeat: no-repeat;
}
.bulletin-wrapper .bulletin-text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}
.header .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.details {
  width: 100%;
  height: 100%;
  background: rgba(7, 17, 27, 0.2);
  position: fixed;
}
.header-detail {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 1;
  color: #fff;
  background: rgba(7, 17, 27, 0.8);
}
</style>
